import React, { useEffect, useState } from 'react'
import { DeleteOutlined, EditOutlined, ExclamationCircleOutlined, UploadOutlined } from '@ant-design/icons';
import { Table, Button, Modal, notification } from 'antd'
import axios from 'axios'
import { NavLink } from 'dva/router';

const { confirm } = Modal;

export default function NewsDraft(props) {
    const [dataSource, setdataSource] = useState([])
    const { username } = JSON.parse(localStorage.getItem('token'))
    useEffect(() => {
        axios.get(`/news?author=${username}&auditState=0&_expand=category`).then(res => {
            setdataSource(res.data)
        })
    }, [username])
    // 删除框
    const confirmMethod = (item) => {
        confirm({
            title: '你确定要删除吗?',
            icon: <ExclamationCircleOutlined />,
            // content: 'When clicked the OK button, this dialog will be closed after 1 second',
            onOk() {
                deleteMethod(item)
            },

            onCancel() {
                // console.log('取消');
            },
        });
    }
    // 删除
    const deleteMethod = (item) => {
        setdataSource(dataSource.filter(data => data.id !== item.id))
        axios.delete(`/news/${item.id}`)
    }
    
    // 上传
    const hanleCheck=(id)=>{
        axios.patch(`/news/${id}`,{
            auditState:1
        }).then(res => {
            props.history.push('/audit-manage/list')

            notification.info({
                message: `通知`,
                description:
                    `你可以到审核列表中查看你的信息`,
                placement: 'bottomRight',
            });
        })
    }
    const columns = [
        {
            title: 'ID',
            dataIndex: 'id',
            render: (id) => {
                return <b>{id}</b>
            },
        },
        {
            title: '新闻标题',
            dataIndex: 'label',
            render: (label, item) => {
                return <NavLink to={`/news-manage/preview/${item.id}`}>{label}</NavLink>
            },

        },
        {
            title: '作者',
            dataIndex: 'author',

        },
        {
            title: '新闻分类',
            dataIndex: 'category',
            render: (category) => {
                return category.label
            }

        },
        {
            title: '操作',
            render: (item) => {
                return <div>
                    {/* 删除 */}
                    <Button danger shape="circle" icon={<DeleteOutlined />} onClick={() => confirmMethod(item)} />
                    {/* 修改 */}
                    <Button shape="circle" icon={<EditOutlined />} onClick={() => {
                        // console.log(item.id);
                        props.history.push(`/news-manage/update/${item.id}`)
                    }} />
                    {/* 上传 */}
                    <Button type="primary" shape="circle" icon={< UploadOutlined />}
                        onClick={() => hanleCheck(item.id)} />

                </div>
            },
        },
    ];
    return (
        <div>
            <Table dataSource={dataSource} columns={columns} pagination={{
                pageSize: 5,
            }} rowKey={item => item.id} />

        </div>
    )
}
